<template>
  <div>
    <div class="con">
      <van-nav-bar
        title="内容详情"
        left-arrow
        @click-left="$router.go(-1)"
        :border="false" />
      <div class="txt">
        <img src="@/assets/add.jpg" alt="" />
        <span
          ><img class="logo" src="@/assets/05-小猫.png" alt="" />{{
            num[0].title
          }}</span
        >
        <div class="txt1">{{ num[0].content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSkills } from '@/api/ycmj'
export default {
  data() {
    return {
      //定义数组保存养宠秘籍
      skill: [],
      item: [],
      num: [],
      psid: this.$route.params.psid,
    }
  },
  methods: {
    //返回上一页
    goOff() {
      this.$router.go(-1)
    },
    //获取所有养宠秘籍
    async getSkill() {
      const data = await getSkills()
      this.skill = data.data.message
      console.log(data)
      data.data.message.forEach(item => {
        if (item.psid == this.psid) {
          this.num.push(item)
        }
      })
    },
  },
  mounted() {
    this.getSkill()
  },
}
</script>

<style lang="scss" scoped>
.logo {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
img {
  width: 300px;
  height: 160px;
}
.con {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
}

.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
* {
  margin: 0;
  padding: 0;
}
.txt {
  padding: 15px;
}
.txt1 {
  margin-top: 20px;
  padding: 5px;
  font-size: 20px;
  // background-color: #fdf1c4;
  color: rgb(220, 168, 72);
  border-radius: 5px;
  font-size: 21px;
  text-align: justify;
  text-indent: 2em;
}
span {
  background-color: rgb(243, 248, 252);
  font-size: 20px;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0.441);
  display: block;
  font-weight: bold;
}
</style>
